<template>
  <div>
    <!-- 选择类型 -->
    <typeSelect :typeList="typeList" @selectType="selectType"></typeSelect>
    <!--  -->
    <div class="topInput">
      <van-field
        v-model="valueForSearch"
        placeholder="请填写内容"
        left-icon="search"
        :clearable="true"
      />
    </div>
    <!-- 信息详情 -->
    <homeData
      v-for="item in houseList"
      :key="item.houseId"
      :homeData="item"
      @click="goto(item)"
    ></homeData>

    <!-- 吸底按钮 -->
    <bottomBtn :btn="btns"> </bottomBtn>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import homeData from "@/components/homeData/index.vue";
import bottomBtn from "@/components/bottomBtn/index.vue";
import typeSelect from "@/components/typeSelect/index.vue";
import { useRoute, useRouter } from "vue-router";
import houseApi from "@/api/house.js";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const HomeType = ref(1)
const typeList = ref([
  {
    name: "装修备案",
    type: 1,
  },
  {
    name: "违规投诉",
    type: 2,
  },
])
const btns = ref({
  name: "装修备案+",
  color: "#409EFE",
  toPath: "addReo",
})

const valueForSearch = ref("");

watch(valueForSearch, (newval) => {
  btns.value.name == "装修备案+"
    ? getDecorationList(newval)
    : complaint(newval);
})
//
const houseList = ref();

/**
 * 获取装修房屋列表
 */
const getDecorationList = async (houseAddress) => {
  try {
    const res = await houseApi.renovation({
      createBy: userStore.userInfo.userId,
      houseAddress: houseAddress,
    });
    houseList.value = res.data.rows;
    console.log('res.data', res.data.rows);
    // houseList.value.forEach((item) => {
    //   item.houseImage = item.houseImage.split(",");
    // });
  } catch (error) {
    console.log(error);
  }
}
getDecorationList();

/**
 * 投诉信息
 */

const complaint = async (place) => {
  try {
    const res = await houseApi.complaint({
      createBy: userStore.userInfo.userId,
      place: place,
    });
    houseList.value = res.data.rows;
    // houseList.value.forEach((item) => {
    //   item.houseImage = item.houseImage.split(",");
    // });
  } catch (error) {
    console.log(error);
  }
};
// 切换type
const selectType = (type) => {

  try {
    valueForSearch.value = "";
    houseList.value = [];
    type == 1 ? getDecorationList() : complaint();
    if (type == 1) {
      btns.value = {
        name: "装修备案+",
        color: "#409EFE",
        toPath: "addReo",
      };
    } else {
      btns.value = {
        name: "我要投诉+",
        color: "#409EFE",
        toPath: "complaint",
      };
    }
  } catch (error) {}
};

const goto = async (item) => {
  if (btns.value.name == "我要投诉+") {
    router.push({
      path: "/complaint/Detail",
      query: {
        tid: item.tid,
      },
    });
  } else if (btns.value.name == "装修备案+") {
    router.push({
      path: "/renovation/Detail",
      query: {
        tid: item.id,
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.selectType {
  .type {
    width: 162px;
    height: 60px;
    border-radius: 10px;
    background: linear-gradient(270deg, #f3f3f3 0%, #e5e5e5 95%);
    color: #666666;
    font-weight: 600;
  }
  .isType {
    background: linear-gradient(270deg, #eef7ff 0%, #bbdfff 100%);
    z-index: inherit;
    color: #222222;
  }
}
.goto {
  background: linear-gradient(270deg, #ffbca8 0%, #ffe9e3 98%);
  height: 80px;
  border-radius: 10px;
}
.brift {
  color: #999999;
}

.topInput {
  padding: 15px;
}

::v-deep .van-field {
  background-color: #fff !important;
  border-radius: 30px;
}
</style>